<!--
 * @Descripttion: APP管理
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-08-12 11:20:30
 * @LastEditors: GW
 * @LastEditTime: 2021-08-12 16:15:12
-->
<template>
    <div class="content-wrapper a-base-container">
        <div class="requisition-set-wrapper">
            <!--按钮-->
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="filedEdit(1)">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">新增</div>
                            </div>
                        </a-col>
                        <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="filedEdit(2)">
                                <a-icon class="btns-icon" type="edit" />
                                <div class="btns-text">修改</div>
                            </div>
                        </a-col>
                        <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="deleteData">
                                <a-icon class="btns-icon" type="delete" />
                                <div class="btns-text">删除</div>
                            </div>
                        </a-col>
                    </a-col>
                </a-row>
            </div>
            <section class="content-app-wrapper">
                <a-table :columns="columns" :components="components" :data-source="dataSource" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange,columnWidth:10 }" :scroll="{x:800,y:500}" :pagination="pagination" bordered>

                </a-table>
            </section>
        </div>
        <drag-modal v-model="visible" :title="dragAddTitle" @cancel="cancelAdd" width="800px">
            <a-form-model class="demand-modal" :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }" @submit="handleSubmitText">
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item label="名称" :rules="[{ required: true, trigger:'input'}]">
                            <a-input placeholder="请输入名称" v-model="requestData.appName" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="版本号" :rules="[{ required: true, trigger:'input'}]">
                            <a-input placeholder="请输入版本号" v-model="requestData.appVersion" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="类型" :rules="[{ required: true, trigger:'input'}]">
                            <a-radio-group v-model="requestData.type">
                                <a-radio :value="1">
                                    安卓
                                </a-radio>
                                <a-radio :value="0">
                                    ios
                                </a-radio>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="是否强制更新">
                            <a-radio-group v-model="requestData.isForcedUpdate">
                                <a-radio :value="1">
                                    是
                                </a-radio>
                                <a-radio :value="0">
                                    否
                                </a-radio>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="状态">
                            <a-radio-group v-model="requestData.status">
                                <a-radio :value="1">
                                    可用
                                </a-radio>
                                <a-radio :value="0">
                                    停用
                                </a-radio>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="下载地址">
                            <a-upload :action="this.$Global.ApiBaseUrl + '/uploadFile'" :headers="headers" list-type="text" :file-list="fileList" class="upload-list-inline" @change="uploadFile">
                                <a-button>
                                    <a-icon type="upload" /> 上传
                                </a-button>
                            </a-upload>
                        </a-form-model-item>
                    </a-col>
                    <!-- <a-col :span="24">
                        <div style="padding-left:0 30px;">
                            <div class="font-color">描述:</div>
                            <div>
                                <a-input v-model="requestData.remarks" placeholder="请输入描述" type="textarea" />
                            </div>
                        </div>
                    </a-col> -->
                </a-row>
            </a-form-model>
            <template slot="footer">
                <a-button type="primary" @click="handleSave">保存</a-button>
                <a-button @click="cancelAdd" class="margin-left-10">关闭</a-button>
            </template>
        </drag-modal>
    </div>
</template>

<script>
import Vue from "vue";
import Api from "@/api/app/management";
import { components } from "@/utils/antTableComponents";

export default {
    data () {
        return {
            //----------↓样式----------
            btnGrid: {
                xs: 2,
                sm: 2,
                md: 2,
                lg: 2,
                xl: 2
            },
            //----------↑样式----------
            columns: [{
                title: "序号",
                dataIndex: "index",
                key: "index",
                width: 10,
                align: 'center',
                customRender: (text, record, index) => {
                    return index + 1;
                },
            }, {
                title: "app名称",
                dataIndex: "appName",
                key: "appName",
                width: 40,
                align: 'left',
            }, {
                title: "版本号",
                dataIndex: "appVersion",
                key: "appVersion",
                width: 40,
                align: 'left',
            }, {
                title: "下载地址",
                dataIndex: "downloadUrl",
                key: "downloadUrl",
                width: 80,
                align: 'left',
                customRender: (text) => {
                    return <a href={text} target="_blank">{text}</a>
                }
            }, {
                title: "下载次数",
                dataIndex: "downloadCount",
                key: "downloadCount",
                width: 40,
                align: 'left',
            }, {
                title: "是否强制更新",
                dataIndex: "isForcedUpdate",
                key: "isForcedUpdate",
                width: 40,
                align: 'center',
                customRender: (text) => {
                    return text == 1 ? '是' : text == 0 ? '否' : ''
                }
            }, {
                title: "状态",
                dataIndex: "status",
                key: "status",
                width: 40,
                align: 'center',
                customRender: (text) => {
                    return text == 1 ? '启用' : text == 0 ? '停用' : ''
                }
            }, {
                title: "类型",
                dataIndex: "type",
                key: "type",
                width: 40,
                align: 'center',
                customRender: (text) => {
                    return text == 1 ? '安卓' : text == 0 ? 'ios' : ''
                }
            }],
            pagination: {
                current: 1,
                pageSize: 10,
                total: null,
            },
            headers: { "Access-Token": Vue.ls.get("Access-Token") },
            mouseId: null,
            selectedRowKeys: [],
            selectedRows: [],
            dataSource: [],
            fileList: [],
            editStatus: null,//数据表弹窗处于说明状态1：新增 2：修改
            visible: false,
            dragAddTitle: '新增APP版本',//弹框标题
            requestData: {
                appName: null,//app名称
                appVersion: null,//版本号
                createDate: null,//创建时间
                downloadUrl: null,//下载地址
                isForcedUpdate: null,//是否强制更新:0否1是
                status: null,//状态:1可用 0停用
                type: null,//类型1:安卓 2:ios
            }
        };
    },
    created () {
        this.components = components(this.columns);
        this.getListData();
    },
    methods: {
        onSelect (keys, rows) {
            console.log('selected', keys, rows, rows.node.dataRef);
            if (rows.selected) {
                this.filedData = [];
                this.moduleId = rows.node.dataRef.id;
                this.getFormName();
            }
        },
        filedEdit (type) {
            //type 1:新增 2：修改
            this.editStatus = type;
            if (type == 1) {
                this.requestData = {}
            } else {
                if (this.selectedRowKeys.length != 1) {
                    this.$message.warning('请选择一条数据');
                    return;
                }
                this.requestData = this.selectedRows[0];
                if (this.requestData.downloadUrl) {
                    this.fileList = [
                        {
                            uid: '-1',
                            name: this.requestData.appName,
                            status: 'done',
                            response: { url: this.requestData.downloadUrl },
                        }];
                } else {
                    this.fileList = [];
                }

            }
            this.visible = true;
        },
        cancelAdd () {
            //关闭
            this.visible = false;
        },
        uploadFile ({ fileList }) {
            if (fileList.length > 1) {
                this.$message.warning('只能上传一个文件');
                return;
            }
            // if (info.file.status === 'done') {
            //     this.$message.success(`${info.file.name} 上传成功`);
            // } else if (info.file.status === 'error') {
            //     this.$message.error(`${info.file.name} 上传失败`);
            // }
            this.fileList = fileList;
            console.log(this.fileList);
        },
        handleSave () {
            //保存
            if (!this.requestData.appName) {
                this.$message.warning('app名称必须填写');
                return;
            }
            if (!this.requestData.appVersion) {
                this.$message.warning('app版本号必须填写');
                return;
            }
            if (this.requestData.type == null) {
                this.$message.warning('app类型必须选择');
                return;
            }

            if (this.fileList.length >= 1) {
                this.requestData.downloadUrl = this.fileList[0].response.url;
            }
            this.requestData.createDate = null;

            Api.save(this.requestData).then(res => {
                if (res.code === 200) {
                    this.$message.success('保存成功');
                    this.visible = false;
                    this.getListData();
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },
        getListData () {
            Api.getList().then(res => {
                if (res.code === 200) {
                    this.dataSource = res.data.records;
                    this.dataSource.forEach(item => {
                        item.key = item.id;
                    });
                    const { pagination } = this;
                    pagination.current = res.data.current;
                    pagination.total = res.data.total;
                }
            })
        },
        deleteData () {
            if (this.selectedRowKeys.length != 1) {
                this.$message.warning('请选择一条数据');
                return;
            }
            let _this = this;
            this.$confirm({
                title: "提示",
                content: `是否确认删除 ${_this.selectedRows[0].appName}`,
                onOk () {
                    Api.remove({ id: _this.selectedRows[0].id }).then(res => {
                        if (res.code === 200) {
                            _this.$message.success('删除成功');
                            _this.getListData();
                        }
                    })
                },
                onCancel () { },
            });
        },
        onSelectChange (keys, rows) {
            console.log(keys, rows);
            this.selectedRowKeys = keys;
            this.selectedRows = rows;
        }
    },
};
</script>
<style lang="less">
    @import '~@/style/purchase/voucher.less';
    .content-app-wrapper {
        height: 100%;
        overflow-y: auto;
        padding: 10px;
    }
    .demand-modal {
        label:not(.form-check-label):not(.custom-file-label) {
            font-weight: normal;
        }
        .ant-form-item {
            margin-bottom: 0px;
        }
    }
</style>

